<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>表格合并示例 - 优化版</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    table {
      border-collapse: collapse;
      width: 80%;
      margin: 20px auto;
    }
    th, td {
      border: 1px solid #888;
      padding: 8px 12px;
      text-align: center;
    }
    th {
      background-color: #eee;
    }
  </style>
</head>
<body>

<div id="tableContainer"></div>

<script>
  $(function () {
    const backendData = {
      "list": [
        {
          "rq": "2025-04-07",
          "team_name": "综采五队",
          "mounth_diff_cl": "32965.33",
          "mounth_diff_jc": "11.37",
          "year_diff_cl": "2289558.11",
          "year_diff_jc": "744.79",
          "all_cl": "6170981",
          "all_jc": "2142.8",
          "left_cl": "519478",
          "left_jc": "200",
          "actual_height": "5.9",
          "order_num": "2",
          "face_length": "2342.8",
          "design_face_height": "6.8",
          "face_width": "296.1",
          "hydraulic_support_num": "148",
          "design_reserve": "718.5"
        }
      ]
    };

    const data = [
      { title: "", name: "数据日期", props: "rq" },
      { title: "", name: "采煤队伍", props: "team_name" },
      { title: "", name: "工作面", props: "mounth_diff_cl" },
      { title: "", name: "设计长度", props: "mounth_diff_jc" },
      { title: "", name: "实际采高", props: "year_diff_cl" },
      { title: "", name: "工作面宽度", props: "year_diff_jc" },
      { title: "", name: "支架数", props: "all_cl" },

      { title: "当日完成情况", name: "当日推进度", props: "all_jc" },
      { title: "当日完成情况", name: "当日产煤量", props: "left_cl" },
      { title: "当月完成情况", name: "月累计推进度", props: "left_jc" },
      { title: "当月完成情况", name: "月计划煤量", props: "rq" },
      { title: "当月完成情况", name: "月累计产煤量", props: "actual_height" },
      { title: "当月完成情况", name: "月均衡超欠", props: "order_num" },

      { title: "合并行13-17", name: "合并数据1", props: "face_length" },
      { title: "合并行13-17", name: "合并数据2", props: "design_face_height" },
      { title: "合并行13-17", name: "合并数据3", props: "face_width" },
      { title: "合并行13-17", name: "合并数据4", props: "hydraulic_support_num" },
      // { title: "合并行13-17", name: "合并数据5", props: "design_reserve" },

      { title: "", name: "当日进度", props: "mounth_plan_cl" },
      { title: "", name: "当日煤量", props: "mounth_plan_jc" }
    ];

    let html = '<table><tr></tr>';

    for (let i = 0; i < data.length; i++) {
      const row = data[i];
      const value = backendData.list[0][row.props] || "--";

      if (i < 7) {
        html += `<tr><td colspan="2">${row.name}</td><td>${value}</td></tr>`;
      } else if (i === 7) {
        html += `<tr><td rowspan="2">${row.title}</td><td>${row.name}</td><td>${value}</td></tr>`;
      } else if (i === 8) {
        html += `<tr><td>${row.name}</td><td>${value}</td></tr>`;
      } else if (i === 9) {
        html += `<tr><td rowspan="4">${row.title}</td><td>${row.name}</td><td>${value}</td></tr>`;
      } else if (i >= 10 && i <= 12) {
        html += `<tr><td>${row.name}</td><td>${value}</td></tr>`;
      } else if (i >= 13 && i <= 16) {
        if (i === 13) {
          html += `<tr><td rowspan="4">${row.title}</td><td>${row.name}</td><td>${value}</td></tr>`;
        } else {
          html += `<tr><td>${row.name}</td><td>${value}</td></tr>`;
        }
      } else if (i >= 17) {
        html += `<tr><td colspan="2">${row.name}</td><td>${value}</td></tr>`;
      }
    }

    html += '</table>';
    $('#tableContainer').html(html);
  });
</script>

</body>
</html>
